<h3>Open Drawer</h3>
<lv-datatable [lvData]="data" #lvMiddleTable>
  <thead>
    <tr>
      <th *ngFor="let col of columns; let index = index" [lvCellKey]="col.key" [width]="col.width">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvMiddleTable.renderData">
      <tr [ngClass]="{ 'lv-table-row-highlight': isActive(item) }">
        <td *ngFor="let col of columns; let index = index">
          <a *ngIf="col.key === 'name'" (click)="showDetail(item)">{{ item[col.key] }}</a>
          <span *ngIf="col.key !== 'name'">{{ item[col.key] }}</span>
        </td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<h3>Open Collapse</h3>
<lv-datatable [lvData]="data" #lvLargeTable lvSize="large">
  <thead>
    <tr>
      <th *ngFor="let col of columns; let index = index" [lvCellKey]="col.key" [width]="col.width">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvLargeTable.renderData">
      <tr>
        <td *ngFor="let col of columns; let index = index" [ngClass]="{ 'lv-table-cell-highlight': item.expand && col.key === 'storage' }">
          <div *ngIf="col.key === 'storage'">
            <a (click)="item.expand = !item.expand">{{ item[col.key] }}</a>
            <p>{{ item['ip'] }}</p>
          </div>
          <span *ngIf="col.key !== 'storage'">{{ item[col.key] }}</span>
        </td>
      </tr>
      <tr *ngIf="item.expand" class="lv-table-collapse-row">
        <td [attr.colspan]="columns.length">
          <lv-datatable [lvData]="subData" #lvSubTable lvSize="small">
            <thead>
              <tr>
                <th>Name</th>
                <th>IP Address</th>
                <th>Provinsioning Type</th>
                <th>WWN</th>
                <th>OS</th>
              </tr>
            </thead>
            <tbody>
              <ng-container *ngFor="let item of lvSubTable.renderData; let even = even; let odd = odd">
                <tr>
                  <td>{{ item.name }}</td>
                  <td>{{ item.ip }}</td>
                  <td>{{ item.type }}</td>
                  <td>{{ item.wwn }}</td>
                  <td>{{ item.os }}</td>
                </tr>
              </ng-container>
            </tbody>
          </lv-datatable>
        </td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>
